<style>
	.mask{background: rgba(0,0,0,0.7); width: 100%; height: 100%; position: fixed; left: 0; top: 0; display: none;}
	.phone_box{width: 80%; background: white; margin: 9rem auto 0; border-radius: 3px; padding: 4% 5% 5%;}
	.phonetc_bt{color: #000000; font-weight: bold; font-size: 1rem; margin-bottom: .1rem;}
	.phone_box .wz{font-size: .85rem; line-height: normal; margin-bottom: 1.2rem; color: #666666;}
	.phone_box input{border-color: #811588; padding: 10px; color: #000000; font-size: .85rem;}
	.phone_btn{background: #38ab3c; border: 0; width: 100%; height: 2.5rem; color: white; font-size: 1.1rem; margin-top: .5rem;}
	.phone_box .yzm_input{width: 52%; float: left;}
	.yzm_btn{width: 45%; float: right; background: #CCCCCC; text-align: center; font-size: .85rem; height: 40px; line-height: 40px; border-radius: 5px; color: #000000;}
	.phone_box input{    line-height: 21px;width: 100%;height: 40px; margin-bottom: 15px;padding: 10px 15px;-webkit-user-select: text;border: 1px solid rgba(0,0,0,.2);border-radius: 3px;outline: 0;background-color: #fff; -webkit-appearance: none;}
</style>
<script src="__INDEX__/js/jquery.js"></script>
<script src="__INDEX__/js/mui.min.js"></script>
<div class="mask" id="bind_phone">
	<form id='login-form'>
	<div class="phone_box">
		<p class="wz">您还未绑定手机号，请您在下方输入框中输入您的手机号码完成绑定。</p>
		<p><input type="text" name="user_name" id="user_name" placeholder="请输入您的姓名" autocomplete="off"></p>
		<p><input type="text" name="mobile" id="mobile" placeholder="请输入您的手机号码" autocomplete="off"></p>
		<p class="clearfix">
			<input type="text" id="yzm" name="yzm" placeholder="" class="yzm_input" autocomplete="off"/>
			<span class="yzm_btn" id="send_code">获取验证码</span>
		</p>
		<p><button type="button" id="btn" class="phone_btn">确认</button></p>
	</div>
	</form>
</div>
<script>
	$(function(){ 
    	//用户注册
    	var mobile = "{$Think.session.user_info.mobile}";
    	if(!mobile){
    		$('#bind_phone').show();
    	} 
    });
    
    var onoff = true;
	//获取验证码
	$('#send_code').click(function() {
		//false就不能发送
		if(!onoff) {
			return;
		}
		onoff = false;
		//点击玩按钮干什么?
		//发验证码? 
		// 1-给谁发? 手机号码
		var phone = $("#mobile").val();
		
		if(phone == '') {
			mui.toast('手机号码不能为空'); 
			onoff = true;
			return;
		}
		var reg = /^1[3|4|5|6|7|8|9][0-9]{9}$/; //验证规则
		if(!reg.test(phone)) {
			mui.toast('手机号码格式不正确');
			onoff = true;
			return;
		}
		$.ajax({
			type:"post",
			//请求的url
			//注意，如果我们使用路由器的情况下，我们需要设置一下本地服务器的ip地址
			url: "{:url('index/index/verify_code')}",
			//请求的过程中传递过去的参数 json
			data: {
				mobile: phone,
			},
			//成功了的回调，并且带有返回值
			success: function(data) {
				mui.toast(data.msg);
				var num = 60;
				var timer = setInterval(function() {
					num--;
					if(num == 0) {
						$('#send_code').text('发送验证码');
						//定时器停了
						clearInterval(timer);
						onoff = true;
					} else {
						$('#send_code').text(num + 'S');
					}
				}, 1000); // 1000 毫秒==1秒
			}
		})
	});
	
	$('#btn').click(function(){
		var phone = $('#mobile').val();
    	var user_name = $('#user_name').val();
    	var yzm = $('#yzm').val();
    	var reg = /^1[3|4|5|6|7|8|9][0-9]{9}$/; //验证规则 
    	if(!user_name){
    		mui.toast('请填写您的姓名');
			return false;
    	}
    	if(!phone){
    		mui.toast('请填写手机号码');
			return false;
    	}
		if(!reg.test(phone)) {
			mui.toast('手机号码格式不正确'); 
			return;
		}
    	if(yzm.trim() == '') {
			mui.toast('验证码不能为空');
			return;
		} 
		btn.disabled = true;
		setTimeout(function() {
			btn.disabled = false;
		}, 1500);
		$.ajax({
			url: "{:url('index/index/phone')}",
			data: $('#login-form').serialize(),
			type: 'post',
			async: false,
			success: function(res) { 
			    if(res.code == 200) {
                  mui.toast(res.msg)
                  $('#bind_phone').hide();
                } else {
                  mui.toast(res.msg);
                }
			}
		})
	});
</script>
